<template>
  <div id="questionnaire-rule">
    <div class="module">
      <h4 style="margin-bottom: 20px">整体设置</h4>
      <div class="module-row">
        <span>此题必答</span>  
        <a-switch default-checked  v-model="ruleOp.required"/>
      </div>
      <div class="module-row" v-if="data.value.formType === 4">
        <span>格式限制</span>
        <a-select style="width: 120px;" v-model="ruleOp.formatLimit">
          <a-select-option v-for="(item, index) in textTypes" :key="index" :value="item.value">
            {{item.name}}
          </a-select-option>
        </a-select>
      </div>
      <div class="module-row" v-if="data.value.formType === 4">
        <span>最少填写</span>  
        <a-input-number id="inputNumber" v-model="ruleOp.minValue" :min="1" :max="100000" />
      </div>
      <div class="module-row" v-if="data.value.formType === 4">
        <span>最多填写</span>  
        <a-input-number id="inputNumber" v-model="ruleOp.maxValue" :min="1" :max="100000" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      ruleOp: {
        required: true,
        formatLimit: 'any',
        minValue: 1,
        maxValue: 1000
      },
      textTypes: [{
        name: '不限',
        value: 'any'
      },{
        name: '邮箱',
        value: 'email'
      }]
    }
  },
  created() {
    this.dealRuleOptions()
  },
  destroyed() {
    this.data.value.ruleOption = this.getRuleOption(this.ruleOp)
  },
  methods: {
    dealRuleOptions() {
      let data = this.data.value
      if(Object.prototype.hasOwnProperty.call(data, 'ruleOption')) {
        this.ruleOp = data.ruleOption
      } else {
        this.data.value.ruleOption = {}
      }
    },

    /**
     * @Description: 根据表单项类型动态添加校验规则
     * @param {*} op
     * @Date: 2020-11-03 09:05:52
     */    
    getRuleOption(op) {
      if(this.data.value.formType === 4) {
        return op
      } else {
        return {
          required: op.required
        }
      }
    }
  }
}
</script>

<style lang="less">
  #questionnaire-rule {
    .module {
      &:last-child {
        border-bottom: 1px solid #bbb;
      }
      .module-row {
        height: 60px;
        border-top: 1px solid #bbb;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>